<template>
  <div>
    <i-row>
      <i-col span="22" i-class="col-class" offset="1">
        <swiper v-if="SwiperBannerList.length > 0" class="banner_swiper" autoplay interval="3000">
          <block v-for="(item, index) in SwiperBannerList" :key="index" >
            <swiper-item>
              <image :src="item.ImgUrl" class="banner_img"></image>
            </swiper-item>
          </block>
        </swiper>
      </i-col>
    </i-row>
    <image src="../../static/images/title.png" class="title"></image>
    <a :href="AbsoluteBanner.ProUrl" class="guanggao">
      <image :src="AbsoluteBanner.ImgUrl" class="guanggaoImg"></image>
    </a>
    <i-row>
      <block v-for="(item, index) in TopIconList" :key="index" >
        <i-col span="6" i-class="col-class">
          <div class="TopIcon">
            <image :src="item.ImgUrl" alt="" class="TopIconImg"></image>
            <p class="TopIconTxt">{{item.ActName}}</p>
          </div>
        </i-col>
      </block>
    </i-row>
    <i-notice-bar icon="systemprompt" loop color="#1fb1b8">
      2018年世界杯,将于6月14日至7月15日举行;2018年世界杯,将于6月14日至7月15日举行;
    </i-notice-bar>
    <div class="CenterContentListBox">
      <block v-for="(item, index) in CenterContentList" :key="index">
        <image :src="item.ImgUrl" alt="" style="width:334rpx;height:200rpx;border-radius:8rpx;"></image>
      </block>
    </div>
    <div class="SaleList">
      <ul>
        <li v-for="(item,index) in SaleList" :key="index">
          <image :src="item.TabImgUrl" style="width:100%;height:284rpx;"></image>
          <div>
            <scroll-view :scroll-x="true" style="boder:1px solid red;white-space:nowrap">
              <view v-for="(val,idx) in item.CakeList" :key="idx" class="SaleListCell">
                <image :src="val.ImgUrl" mode="scaleToFill" style="width:240rpx;height:240rpx;margin:0 36rpx"></image>
                <p class="SaleListCellTit">{{val.Name}}</p>
                <div class="SaleListCellPrice">￥{{val.Price}}<span class="SaleListCellSize">/{{val.Size}}</span></div>
              </view>
            </scroll-view>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      SwiperBannerList: [],
      AbsoluteBanner: {},
      TopIconList: [],
      NoticeList: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      CenterContentList: [],
      SaleList: []
    }
  },
  methods: {
    toPath () {
      const url = '../test/main?uname=lala'
      mpvue.navigateTo({ url })
      // if (mpvuePlatform === 'wx') {
      //   mpvue.switchTab({ url })
      // } else {
      //   mpvue.navigateTo({ url })
      // }
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    },
    pageInit(){
      this._getIndexData((res)=>{
        var res = res.Tag.mainresult;
        console.log(res.SaleList)
        this.SwiperBannerList=res.SwiperBannerList;
        this.AbsoluteBanner=res.AbsoluteBannerList[0];
        this.TopIconList=res.TopIconList;
        this.NoticeList=res.NoticeList;
        this.CenterContentList=res.CenterContentList;
        this.SaleList=res.SaleList;

        this.SaleList.map((item)=>{
          item.CakeList=JSON.parse(item.CakeList)
          item.CakeList.map((item)=>{
            item.ImgUrl=this.$global.joinImgUrl(item);
          })
        })
      })
    },
    _getIndexData(callBack){
      this.$apis.getIndexData().then((res)=>{
        callBack(res)
      })
    }
  },

  mounted(){
    this.pageInit();
  }
}
</script>

<style lang="scss" scoped>
.banner_swiper{
  width: 100%;
  height: 360rpx;
  .banner_img{
    width: 100%;
    height: 100%;
  }
}
.title{
  width: 100%;
  height: 72rpx;
}
.guanggao{
  height: 172rpx;
  margin: 0 32rpx;
  .guanggaoImg{
    width: 100%;
    height: 100%;
  }
}
.CenterContentListBox{
  height: 418rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-between;
}
.TopIcon{
  width: 100%;
  height: 173rpx;
  padding-top:33rpx;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items:center;
  .TopIconImg{
    width: 100rpx;
    height: 100rpx
  }
  .TopIconTxt{
    width: 100%;
    height: 30rpx;
    font-size: 22rpx;
    text-align: center;
    line-height: 26rpx;
    color: #333;
  }
}
.SaleList{
  .SaleListCell{
    width:312rpx;
    height:410rpx;
    display:inline-block;
    padding-top: 30rpx;
    margin-left: 24rpx;
    .SaleListCellTit{
      width: 230rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-left: 35rpx;
      white-space: pre-wrap;
    }
    .SaleListCellPrice{
      display: flex;
      width: 230rpx;
      margin-left: 35rpx;
      color: #cc2825;
      font-size: 30rpx;
      .SaleListCellSize{
        flex: 1;
        color: #999;
        font-size: 28rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
